<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>陈亮 2021-07-10 16:37-</title>
    <link rel="stylesheet" href="./liang.css">
    <style>
        .lunbo {
            width: 800px;
            height: 350px;
            margin: 20px auto;
            position: relative;
        }

        .lunbo img {
            width: 800px;
            height: 350px;
        }

        .dot {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 10px;
        }

        .dot li {
            width: 10px;
            height: 10px;
            background-color: #ccc;
            border-radius: 50%;
            margin: 0 5px;

        }

        .dot li.active {
            background-color: darkred;
        }

        .arrow {
            font-style: 20px;
            line-height: 80px;
            text-align: center;
            width: 50px;
            height: 80px;
            position: absolute;
            bottom: 40%;
            margin: auto 0;
            cursor: pointer;
            color: #999;
        }

        .arrow:hover {
            background-color: rgb(182, 227, 241, 0.5);
        }

        .left {
            left: 10px;
        }

        .right {
            right: 10px;
        }
    </style>

</head>

<body>
    <div class="lunbo">
        <img class="img" src="" alt="">
        <ul class="dot flex j-c">
        </ul>
        <div class="left arrow">&lt;</div>
        <div class="right arrow">&gt;</div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
        let $img = $(`.img`)
        let index = 0
        let imgs = [
            "http://p1.music.126.net/ki3TM2tt0abtK0bidRkk2Q==/109951166163229260.jpg?imageView&quality=89",
            "http://p1.music.126.net/agUAr5UT97of8kt-JViQMw==/109951166164222770.jpg?imageView&quality=89",
            "http://p1.music.126.net/OxuI6N3mMWF_wJzR3z2WFA==/109951166164233196.jpg?imageView&quality=89",
            "http://p1.music.126.net/O3CawnTW7ymCrzd_l0iRNg==/109951166163239238.jpg?imageView&quality=89",
            "http://p1.music.126.net/qxFE0is05MMfq4_ESlmafQ==/109951166164227217.jpg?imageView&quality=89"]

        $(`.lunbo`).attr(`img`, imgs[index])
        $img.mouseenter(function () {
            clearInterval(timer)
        })
        $(`.lunbo`).mouseleave(function () {
            run()
        })

$(`.left`).click(function(){
if(--index<0)index=imgs.length-1
chenge()
})
$(`.right`).click(function(){
if(++index===imgs.length)index=0
chenge()
})

        function creatDot() {
            for (let i = 0; i < imgs.length; i++) {
                let $li = $(`<li>`)
                $li.click(function () {
                    index = $(this).index()
                    clearInterval(timer)
                    chenge()

                })
                $(`.dot`).append($li)
            }
            $(`.dot li`).eq(index).addClass(`active`)
        }

        let timer = null
        function run() {
            timer = setInterval(() => {
                if (++index >= imgs.length) index = 0
                chenge()
            }, 3000);
        }
        function chenge() {
            $img.attr(`src`, imgs[index])
            $(`.dot li`).eq(index).addClass(`active`).siblings(`.active`).removeClass(`active`)
        }
        creatDot()
        run()
    </script>
</body>

</html>